<template>
<div >
    <div class="detail">
      <img src="~assets/img/common/back.svg" alt="" @click="back">
      <div v-for="(item ,index) in titles" id="detail-item"
           :class="{active: index === currentIndex}"
           @click="change(index)">
        {{item}}
      </div>
    </div>

</div>
</template>

<script>
import NarBar from "@/components/common/navbar/NarBar";
export default {
  name: "DetailNavBar",
  data () {
    return {
      titles:['商品','参数','评论','推荐'],
      currentIndex:0,

    }
  },
  components:{
    NarBar
  },
  methods:{
    change (index) {
      this.currentIndex=index;
      this.$emit('itemindex',index)
    },
    back () {
      this.$router.push('/home')
    }
  }
}
</script>

<style scoped>

.detail{

  height: 44px;
  box-shadow: 10px 1px whitesmoke;
  display: flex;
}
img{
  margin-top: 3px;
  width: 25px;
}

#detail-item{
  margin-top: 12px;
  margin-left:17px ;
  flex: 1;
}
.active{
  color:  #ff8198;
}

</style>